<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <title>叫号系统</title>
    <link rel="shortcut icon" href="/static/img/Icon.ico"> <!-- 网站图标 必须ico文件 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap样式-->
    <link rel="stylesheet" href="/static/bootstrap v4/css/bootstrap.min.css">
    <!-- 引入 Bootstrap样式：插件datetimepicker-->
    <link rel="stylesheet" type="text/css" href="/static/bootstrap v4/css/bootstrap-datetimepicker.min.css">
    <!-- 引入 Bootstrap样式：插件bootstrap-select-->
    <link rel="stylesheet" type="text/css" href="/static/bootstrap v4/css/bootstrap-select.min.css">

    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>

    <!-- Excle导出插件(bootstrap-table-export) -->
    <script src="/static/js/TableExport/bootstrap-table.min.js"></script>
    <script src="/static/js/TableExport/bootstrap-table-locale-all.min.js"></script>
    <script src="/static/js/TableExport/bootstrap-table-export.min.js"></script>
    <script src="/static/js/TableExport/FileSaver.min.js"></script> <!--在客户端保存生成的导出文件-->
    <script src="/static/js/TableExport/xlsx.core.min.js"></script> <!--支持以XLSX（Excel 2007+）格式导出-->
    <script src="/static/js/TableExport/tableExport.min.js"></script>  <!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->

    <!--引入DropDown插件-->
    <script src="/static/bootstrap v4/js/bootstrap.bundle.min.js"></script>
    <!--引入WebSocket断线重连插件-->
    <script src="/static/js/reconnecting-websocket.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <!--    <script src="/static/bootstrap v4/js\bootstrap.min.js"></script>-->

    <!-- 引入 Bootstrap 插件datetimepicker-->
    <script src="/static/bootstrap v4/js/bootstrap-datetimepicker.js"></script>
    <script src="/static/bootstrap v4/js/bootstrap-datetimepicker.zh-CN.js"></script>

    <!-- 引入 Bootstrap 插件bootstrap-select-->
    <script src="/static/bootstrap v4/js/bootstrap-select.min.js"></script>
    <script src="/static/bootstrap v4/js/defaults-zh_CN.min.js"></script>

    <style>
        html{
            font-size: 12px; /* 内网大量电脑分辨率是1600*900，因此将默认字体由16px（bootstrap）改为12px  */
        }
        .backgrondStyle {
            background: url('./static/img/bgg.jpg') no-repeat center;
            background-size: 100%;
            border-radius: 30px;
        }
        .hiip_home_top {
            /* background: url('./static/img/top_bg.jpg') no-repeat center; */
            background-size: 100%;
            height: 50px;
        }
        .hiip_home_text {
            font: normal 18px '微软雅黑';
            color: #FFFFFF;
            font-weight: bold;
            float:left;
            text-align:center;
            padding-top: 10px;
        }
        .hiip_username_text {
            font: normal 14px '微软雅黑';
            color: #FFFFFF;
            padding-top: 10px;
        }

        /*
            实现表单元格、表头的长度适应其文字内容
        */
        th{
            white-space:nowrap;
            overflow:hidden;
            word-break:keep-all;
        }
        td{
            white-space:nowrap;
            overflow:hidden;
            word-break:keep-all;
        }
    </style>
    <script>
        // 低版本谷歌不支持ES6，没有padStart函数，解决办法是自己重新实现String.prototype.padStart
        // 需在head中定义
        if (!String.prototype.padStart) {
            String.prototype.padStart = function padStart(targetLength, padString) {
                targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
                padString = String((typeof padString !== 'undefined' ? padString : ' '));
                if (this.length > targetLength) {
                    return String(this);
                }
                else {
                    targetLength = targetLength - this.length;
                    if (targetLength > padString.length) {
                        padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                    }
                    return padString.slice(0, targetLength) + String(this);
                }
            };
        }
    </script>
</head>

<body class="">
<div class="container-fluid">
    <!--顶栏-->
    <div class="row" style="height: 45px; background-color: #007bff">
        <div class="col-xl-offset-3 col-xl-12 hiip_home_top" >
            <h4 class="hiip_home_text">龙岩市第一医院</h4>
            <h4 class="hiip_username_text  text-right "> <a href="#"><img id="headIconImg" src=""></a><span id="userNameText">&nbsp;信息科&nbsp;&nbsp;</span></h4>
        </div>
    </div>
    <!--空白间隔栏-->
    <div class="row" style="height: 15px;"></div>
    <div class="row">
        <!--左侧导航栏-->
        <div class="col-xl-2" >
            <ul class="nav flex-column nav-pills">
                <!--                <li class="nav-item">-->
                <!--                    <a class="nav-link " href="CallNumber">叫号</a>-->
                <!--                </li>-->
                <!--                <li class="nav-item">-->
                <!--                    <a class="nav-link disabled" href="#">签到</a>-->
                <!--                </li>-->
                <!--                <li class="nav-item">-->
                <!--                    <a class="nav-link disabled" href="#">预约</a>-->
                <!--                </li>-->
                <!--                <li class="nav-item">-->
                <!--                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">模板维护</a>-->
                <!--                </li>-->
                <!--                <li class="nav-item">-->
                <!--                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">排班管理</a>-->
                <!--                </li>-->
                <li class="nav-item">
                    <a class="nav-link " href="Statistic_Yj_SqdTimePoint" tabindex="-1" aria-disabled="true">报表1：统计检查单时间点</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#" tabindex="-1" aria-disabled="true">报表2：统计医生工作时长</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="Statistic_Yj_WorkingTime_Zt" tabindex="-1" aria-disabled="true">报表3：统计组套工作时长</a>
                </li>
            </ul>
        </div>
        <!--空白垂直间隔-->
        <div class="col-xl-0" >

        </div>
        <!--右侧主界面-->
        <div class="col-xl-10" >


            <!--工具栏-->
            <div id="toolBar" class="row" style="">
                <div class="col-xl-10">
                    <form class="form-inline">
                        <label class="mb-2  mr-sm-2">
                            <lable data-toggle="tooltip" title="" data-original-title="过滤：传图时间、报告时间">工作日期：</lable>
                        </label>
                        <input type="text" id="dateBegin" name="datetimepicker" value=" " style="width: 100px" placeholder="查询年月" class="form-control mr-sm-2">
                        <label class="mb-2  mr-sm-2">-</label>
                        <input type="text" id="dateEnd" name="datetimepicker" value=" " style="width: 100px" placeholder="查询年月" class="form-control mr-sm-4">
                        <label class="mb-2  mr-sm-2">
                            <lable data-toggle="tooltip" title="" data-original-title="过滤：超声库的检查科室"> 选择院区：</lable>
                        </label>

                        <div class="mb-2  mr-sm-4">
                            <!-- 排序方式 -->
                            <select id="selectYqbs" class="selectpicker"
                                    data-width="60px"
                            >
                                <option value="20011,20012">全部</option>
                                <option value="20011">总院</option>
                                <option value="20012">分院</option>
                            </select>
                        </div>

                        <button id="btnExport" type="button" class="btn btn-warning mb-2 mr-sm-2">导出Excle</button>
                        <button id="btnSearch" type="button" class="btn btn-warning mb-2 mr-sm-2">查询</button>
                    </form>
                </div>
                <!-- toast提示框 -->
                <div class="toast col-xl-2" style="position: absolute; top: 0; right: 0;"  data-delay="5000">
                    <div class="toast-header">
                        <img id="toastImg" src="" class="rounded mr-2" alt="...">
                        <strong id="toastTitle" class="mr-auto">ChyAppointmentPlatform</strong>
                        <small>1 sec ago</small>
                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div id="toastBody" class="toast-body">
                        <span id="toastText">TEST</span>
                    </div>
                </div>
            </div>
            <!--空白间隔栏-->
            <div class="row" style="height: 20px;">

            </div>
            <div class="row">
                <!-- 报表表格 -->
                <div class="col-xl-12">
                    <!-- 院区小标签 -->
                    <h4><span class="badge badge-secondary" id="label_Yq">总院超声</span></h4>

                    <div  style="overflow-y:scroll;height: 600px;">
                        <table id="table_wjhList" class="table table-hover  table-bordered" style="width:auto;text-align: center;" cellspacing="0">
                            <thead class="thead-light">
                                <tr id="threadSecondRow">
                                    <th style="width:50px">序号</th>
                                    <th style="width:100px">报告医生</th>
                                    <th style="width:100px">工作时长</th>
                                    <th style="width:100px">当日排班</th>
                                    <th style="width:100px">检查单数量</th>
                                    <th style="width:200px">第一次传图时间</th>
                                    <th style="width:200px">最后一次报告时间</th>
                                    <th style="width:80px">操作</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyStatistics">
                            <tr>

                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 模态框 -->
    <div id="myModal" class="modal fade"  data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div id="modal_dialog" class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">申请单明细</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div  style="overflow:scroll;height: 600px;">
                        <table id="" class="table table-hover  table-bordered" style="width:auto;" cellspacing="0">
                            <thead class="thead-light" style="text-align: center;">
                                <tr id="" >
                                    <th style="width:50px">序号</th>
                                    <th style="width:100px">报告医生</th>
                                    <th style="width:100px">执行科室</th>
                                    <th style="width:100px">申请单号</th>
                                    <th style="width:100px">病人姓名</th>
                                    <th style="width:100px">检查项目</th>
                                    <th style="width:200px">传图时间</th>
                                    <th style="width:200px">报告时间</th>
                                    <th style="width:200px">工作时长</th>
                                </tr>
                            </thead>
                            <tbody id="modal_tbody" style="text-align: center;"s>
                            <tr>

                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</div>


<script type="text/javascript">

    //
    // 初始化Tooltips（工具提示框组件）
    //
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    //
    // datetimepicker插件
    //
    $('#dateBegin').datetimepicker({
        forceParse: 0,//设置为0，时间不会跳转1899，会显示当前时间。
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    })

    $("#dateBegin").datetimepicker("setDate", new Date());  //设置显示默认当天的时间
    $('#dateEnd').datetimepicker({
        forceParse: 0,//设置为0，时间不会跳转1899，会显示当前时间。
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),//初始化当前日期
        autoclose: true,//选中自动关闭
        todayBtn: true//显示今日按钮
    })
    $("#dateEnd").datetimepicker("setDate", new Date());  //设置显示默认当天的时间



    var IpAndPort;
    var protocol = window.location.protocol;
    if(protocol=="file:"){
        IpAndPort="127.0.0.1:8080";
        $("#headIconImg").attr("src","./static/img/head_Icon.png")
        $("#toastImg").attr("src","./static/img/toast.jpg")
    }else if(protocol=="http:"){
        IpAndPort=window.location.host;
        $("#headIconImg").attr("src","/static/img/head_Icon.png")
        $("#toastImg").attr("src","/static/img/toast.jpg")
    }

    // 解析token
    // var token=getCookie('token');
    // var strings = token.split("."); //截取token，获取载体
    // var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
    // $("#userNameText")[0].innerHTML="&nbsp;[&nbsp;"+userInfo.ksmc+"&nbsp;]&nbsp;&nbsp;"+userInfo.ygxm;






    /**
     * 时间日期格式化
     *
     */
    function dateFormat(fmt, date) {
        var ret;
        const opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "m+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "M+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
         };
        for (var k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }

    /**
     * 获取指定名称的cookie
     */
    function getCookie(name){
        var strcookie = document.cookie;//获取cookie字符串
        var arrcookie = strcookie.split("; ");//分割
        //遍历匹配
        for ( var i = 0; i < arrcookie.length; i++) {
            var arr = arrcookie[i].split("=");
            if (arr[0] == name){
                return arr[1];
            }
        }
        return "";
    }

    /**
     * Obj对象转为Map对象
     */
    function _objToStrMap(obj){
        var strMap = new Map();
        for (var k of Object.keys(obj)) {
            strMap.set(k,obj[k]);
        }
        return strMap;
    }

    //
    // 导出按钮
    //
    $(document).on('click', '#btnExport', function () {

        // 院区文字
        var yq = $("#label_Yq").html();

        // 日期文字
        var rqBegin = $("#dateBegin").val();
        var rqEnd = $("#dateEnd").val();
        var rq;
        if(rqBegin==rqEnd){rq=rqBegin;}
        else{rq=rqBegin+"至"+rqEnd};

        $("#table_wjhList").tableExport({
            // 后缀名
            type: 'xlsx',
            exportDataType: "all",
            // 文件名
            fileName: yq +" "+ rq
        });

    });



    /**
     * 点击【查询】按钮
     */

    $(document).on('click', '#btnSearch', function () {
        // 设置按钮样式为[旋转]
        var btnSearch=$(this);
        btnSearch.html("查询<span class='spinner-border spinner-border-sm' role='status' aria-hidden='true'></span>")

        var ksdm =$("#selectYqbs").val();

        /* 传递MAP */
        var map = new Map();
        map.set("gzrqBegin", $("#dateBegin").val());        // 工作日期
        map.set("gzrqEnd", $("#dateEnd").val());            // 工作日期
        map.set("ksdm", ksdm);                  // 执行科室
        //map转obj
        var obj= Object.create(null);
        for(var key of map){
            obj[key[0]]=key[1];
        }
        // 先清空表格
        $("#tbodyStatistics").html("");
        // AJAX交互
        $.ajax({
            url:"http://"+IpAndPort+"/StatisticController/getWorkingTime_Ys",
            type:"POST",
            contentType : 'application/json;charset=utf-8',
            data:JSON.stringify(obj),
            xhrFields: { withCredentials: true },
            success:function(data){
                var jsonObj = $.parseJSON(data );
                if(jsonObj.status==false){
                    $("#toastTitle").html("提示");
                    $("#toastText").html(jsonObj.detail);
                    $('.toast').toast('show');
                }else if(jsonObj.status==true){
                    var dataObj =  $.parseJSON(jsonObj.detail );
                    var dataMap =  _objToStrMap(dataObj); // obj转为map
                    var yqbs = $("#selectYqbs")[0].options[$("#selectYqbs")[0].options.selectedIndex].innerHTML;

                    // 表格上的小标签显示总分院
                    $("#label_Yq").html(yqbs+"超声");

                    if(dataObj.length!=0){
                        /*
                          动态写入表内容
                        */
                        html = ""
                        for(var row=0;row<dataObj.length;row++){
                            html += "<tr>"
                                html +=     "<td>"+ (row+1) +"</td>"
                                html +=     "<td>"+ dataObj[row].bgys+"</td>"
                                html +=     "<td>"+ dataObj[row].workingHours+"</td>"
                                html +=     "<td>"+ (dataObj[row].OApaiban==undefined?"/":dataObj[row].OApaiban) +"</td>"
                                html +=     "<td>"+ dataObj[row].sqdsl+"</td>"
                                html +=     "<td>"+ dateFormat("YYYY-mm-dd HH:MM:SS",new Date(dataObj[row].firstCtsj))+"</td>"
                                html +=     "<td>"+ dateFormat("YYYY-mm-dd HH:MM:SS",new Date(dataObj[row].lastBgsj))+"</td>"
                                html +=     "<td><button id='btnDetails' type='button' class='btn btn-primary' >明细</button></td>"
                            html +="</tr>"
                        }


                        $("#tbodyStatistics").html(html);
                        $("#tbodyStatistics tr").click(onClickTable_wjhList); /* 每次都重新设置点击事件 */
                    }

                }
                // 设置按钮样式为[不旋转]
                btnSearch.html("查询")
            },
            error:function(data){
                // toast组件提示
                $("#toastTitle").html("提示");
                $("#toastText").html("连接服务端失败...");
                $('.toast').toast('show');
                // 设置按钮样式为[不旋转]
                $(this).html("查询")
            }
        });
    })


    /**
     * 点击表格时选中整行
     */
    var lastTrIndex=-1;
    var lastTrObj;
    function onClickTable_wjhList(){

        /* 因为跨天查询的时候数据量太多，所以关闭此特效，太卡了 */
        // if($("#dateBegin").val()!=$("#dateEnd").val()){
        //     return;
        // }

        //获取被点击的行元素
        var currentTrObj = event.srcElement.parentElement;

        // 获取被点击的行号（索引）
        var currentTrIndex = currentTrObj.rowIndex;
        if(currentTrIndex==undefined)return;    // 点击按钮时不触发样式

        // 修改本次被选中行的css颜色
        $(currentTrObj).attr("class","table-primary");

        // 还原上一次选择的行的颜色
        if(lastTrObj!=null){
            $(lastTrObj).attr("class","table");
        }

        if(currentTrIndex==lastTrIndex){
            lastTrIndex=-1;
        }
        else{
            lastTrIndex = currentTrIndex;
            lastTrObj=currentTrObj;
        }
    }


    //
    // 点击【明细】按钮
    //
    $(document).on('click', '#btnDetails', function () {


        //
        // AJAX
        //
        var bgys = $(this).parents("tr").find("td").eq(1).text();   // 第1列是报告医生
        var ksdm = $("#selectYqbs").val();



        /* 传递MAP */
        var map = new Map();
        map.set("bgys", bgys);
        map.set("gzrqBegin", $("#dateBegin").val()); // 工作日期
        map.set("gzrqEnd", $("#dateEnd").val());     // 工作日期
        map.set("ksdm", ksdm);                       // 执行科室
        map.set("method", "US");                     // 统计方式：正常统计
        //map转obj
        var obj= Object.create(null);
        for(var key of map){
            obj[key[0]]=key[1];
        }
        $.ajax({
            url:"http://"+IpAndPort+"/StatisticController/getSqdDetail",
            type:"POST",
            contentType : 'application/json;charset=utf-8',
            data:JSON.stringify(obj),
            xhrFields: {
                withCredentials: true
            },
            success:function(data){
                var jsonObj = $.parseJSON(data );
                if(jsonObj.status==false){
                    $("#toastTitle").html("错误");
                    $("#toastText").html(jsonObj.detail);
                    $('.toast').toast('show');
                }else if(jsonObj.status==true){
                    var dataObj =  $.parseJSON(jsonObj.detail );
                    html = ""
                    for(var row=0;row<dataObj.length;row++){
                        html += "<tr>"
                        html +=     "<td>"+ (row+1) +"</td>"
                        html +=     "<td>"+ dataObj[row].bgys+"</td>"
                        html +=     "<td>"+ dataObj[row].zxksmc+"</td>"
                        html +=     "<td>"+ dataObj[row].sqdh+"</td>"
                        html +=     "<td>"+ dataObj[row].brxm+"</td>"
                        html +=     "<td>"+ dataObj[row].jcxm+"</td>"
                        html +=     "<td>"+ dateFormat("YYYY-mm-dd HH:MM:SS",new Date(dataObj[row].ctsj))+"</td>"
                        html +=     "<td>"+ dateFormat("YYYY-mm-dd HH:MM:SS",new Date(dataObj[row].bgsj))+"</td>"
                        html +=     "<td>"+ dataObj[row].gzsj_min +" 分钟</td>"
                        html +="</tr>"
                    }
                    $("#modal_tbody").html(html);
                    $('#myModal').modal('show');
                }
            },
            error:function(data){
                // toast组件提示
                $("#toastTitle").html("错误");
                $("#toastText").html("连接服务端失败...");
                $('.toast').toast('show');
            }
        });
    })


</script>
</body>
</html>